<template>
  <div class="w-full h-full flex-column">
    <backstage-title title="进出记录" icon-class="statement-active" class="f-bold-title mb-20" />
    <Filtering
      :filters="filters"
      :btn-list="btnList"
      :show-export="true"
      @onFilter="handleFilter"
      @reset="reset"
      @emitExport="emitExport"
    />
    <Table
      :page-data="pageData"
      :table-data="tableData"
      @pagination="getList"
    >
      <template #action="slotInfoProps">
        <el-button
          type="text"
          size="medium"
          @click="handleDetail(slotInfoProps.info.row)"
        >查看</el-button>
      </template>
    </Table>

    <dialog-tpl class="form-dialog" :dialog-config="dialogConfig">
      <template #dialogContent>
        <component
          :is="dialogConfig.componentTag"
          :dialog-config="dialogConfig"
          :table-config="tableConfig"
          @reload="getList"
        ></component>
      </template>
    </dialog-tpl>

  </div>
</template>

<script>
import TableDetail from '@/components/table-detail'
import Statement from '@/services/statement.js'
import Parking from '@/services/parking-list.js'
import Area from '@/services/area-list.js'
export default {
  components: {
    TableDetail
  },
  data () {
    const { relaseType, isExit } = this.$formatters
    return {
      filters: [
        {
          type: 'select',
          value: '',
          label: '车场名称',
          placeholder: '请选择车场名称',
          style: 'width: 220px;margin-right: 30px',
          options: [],
          change: (val) => {
            this.getAreaList(val)
            console.log('🚀 ~ data ~ val:', val)
          }
        },
        {
          type: 'input',
          value: '',
          label: '车牌号码',
          placeholder: '请输入车牌号码',
          style: 'width: 220px;margin-right: 30px'
        },
        {
          type: 'select',
          value: '',
          label: '入场通道',
          placeholder: '请选择入场通道',
          style: 'width: 220px;margin-right: 30px',
          options: []
        },
        {
          type: 'select',
          value: '',
          label: '出场通道',
          placeholder: '请选择出场通道',
          style: 'width: 220px;margin-right: 30px',
          options: []
        },
        {
          type: 'select',
          value: '',
          label: '放行类型',
          placeholder: '请选择放行类型',
          style: 'width: 220px;margin-right: 30px',
          options: [
            { label: '正常放行', value: 0 },
            { label: '收费放行', value: 1 },
            { label: '免费放行', value: 2 },
            { label: '异常放行', value: 3 },
          ]
        },
        {
          type: 'select',
          value: '',
          label: '是否出场',
          placeholder: '请选择车辆是否出场',
          style: 'width: 220px;margin-right: 30px',
          options: [
            { label: '出场', value: 0 },
            { label: '进场', value: 1 },
          ]
        },
        {
          type: 'select',
          value: '',
          label: '停车时长',
          placeholder: '请选择停车时长',
          style: 'width: 100px',
          options: [
            { label: '不限', value: 0 },
            { label: '大于', value: 1 },
            { label: '等于', value: 2 },
            { label: '小于', value: 3 },
          ]
        },
        {
          type: 'input',
          value: '',
          label: '',
          placeholder: '请输入多少分钟',
          style: 'width: 150px;;margin-right: 30px'
        },
        {
          type: 'select',
          value: '',
          label: '时间类型',
          placeholder: '请选择时间类型',
          style: 'width: 160px;',
          options: [
            { label: '出场时间', value: 0 },
            { label: '入场时间', value: 1 },
          ]
        },
        {
          type: 'date',
          dateType: 'datetimerange',
          value: '',
          label: '',
          style: 'width: 400px'
        },
      ],
      btnList: [],
      pageData: {
        total: 0,
        page: 1,
        pageSize: 10
      },
      tableData: {
        columns: [
          { label: '车场名称', prop: 'parkName' },
          { label: '放行类型', prop: 'relaseType', formatter: relaseType },
          { label: '进出场类型', prop: 'isExit', formatter: isExit },
          { label: '车牌号码', prop: 'plate' },
          { label: '应收金额', prop: 'amountTotal' },
          { label: '实收金额', prop: 'amount' },
          { label: '车类', prop: 'typeName' },
          { label: '车型', prop: 'modelName' },
          { label: '停车时长(分)', prop: 'stopTime' },
          { label: '进场时间', prop: 'enterTime' },
          { label: '出场时间', prop: 'exitTime' },
          { label: '进场通道', prop: 'enterGateName' },
          { label: '出场通道', prop: 'exitGateName' },
          { label: '操作', prop: 'action', slot: true, width: 80 },
        ],
        data: [],
        config: {
          selection: false,
          index: true
        }
      },
      dialogConfig: {
        show: false,
        title: '进出记录查看',
        width: '45%',
        data: {},
        componentTag: 'TableDetail'
      },
      tableConfig: {
        span: '2',
        data: [
          {
            label: '车场名称',
            key: 'parkName'
          },
          {
            label: '放行类型',
            key: 'relaseType'
          },
          {
            label: '是否出场',
            key: 'isExit'
          },
          {
            label: '车牌号码',
            key: 'plate'
          },
          {
            label: '应收金额',
            key: 'amountTotal'
          },
          {
            label: '实收金额',
            key: 'amount'
          },
          {
            label: '车类',
            key: 'typeName'
          },
          {
            label: '车型',
            key: 'modelName'
          },
          {
            label: '停车时长(分)',
            key: 'stopTime',
            width: '100%'
          },
          {
            label: '进场时间',
            key: 'enterTime'
          },
          {
            label: '出场时间',
            key: 'exitTime'
          },
          {
            label: '进场通道',
            key: 'enterGateName'
          },
          {
            label: '出场通道',
            key: 'exitGateName'
          },
          {
            label: '进场图',
            key: 'inImg'
          },
          {
            label: '出场图',
            key: 'outImg'
          },
          {
            label: '备注',
            key: 'remark',
            width: '100%'
          },
        ]
      }
    }
  },
  computed: {
    relaseType () {
      return (type) => {
        return {
          0: '正常放行',
          1: '收费放行',
          2: '免费放行',
          3: '异常放行'
        }[+type]
      }
    },
    searchParams () {
      const [parkingId,
        plate,
        enterGateId,
        exitGateId,
        relaseType,
        isExit,
        type,
        stopTime,
        timeType,
        date,] = this.filters.map(i => i.value)
      const [startTime,
        endTime,] = date || []
      return {
        parkingId,plate,enterGateId,exitGateId,relaseType,isExit,
        type,stopTime, timeType,startTime, endTime
      }
    }
  },
  created () {
    // this.getList()
    this.getParking()
    // this.getAreaList()
  },
  methods: {
    handleFilter () {
      this.pageData.page = 1
      this.getList()
    },
    getParking () {
      Parking.ParkingList({pageNum: 1, pageSize: 9999, isOperate: 1}).then(res => {
        this.filters[0].options = (res.rows || []).map(i => ({ label: i.parkName, value: i.id, ...i}))
      })
    },
    getAreaList (val = '') {
      Promise.all([
        Area.areaList({ pageNum: 1,pageSize: 9999, direction: 1, parkingId: val}),
        Area.areaList({ pageNum: 1,pageSize: 9999, direction: 0, parkingId: val}),
      ]).then(([res1,
        res2,]) => {
        this.filters[2].options = (res1.rows || []).map(i => ({ label: i.gateName, value: i.gateNo, ...i}))
        this.filters[3].options = (res2.rows || []).map(i => ({ label: i.gateName, value: i.gateNo, ...i}))
      })
    },
    emitExport () {
      this.$confirm('是否导出车辆进出记录数据?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        Statement.carRecordDownLoad({...this.searchParams}).then(res => {
          this.$message.success('导出成功')
        })
      }).catch(() => {

      })
    },
    getList () {
      const { page: pageNum, pageSize} = this.pageData
      Statement.carRecordList({...this.searchParams,pageNum, pageSize}).then(res => {
        const { rows: tableData, total } = res
        this.tableData = {
          ...this.tableData,
          data: tableData
        }
        this.pageData = {
          ...this.pageData,
          total
        }
      })
    },
    handleDetail (row = {}) {
      const rowData = {
        ...row,
        isExit: +row.isExit === 0 ? '出场' : '进场',
        relaseType: this.relaseType(row.relaseType),
        amountTotal: row.amountTotal + '元',
        amount: row.amount + '元',
        stopTime: row.stopTime === null ? '未出场' : row.stopTime + '分钟'
      }
      this.dialogConfig = {
        show: true,
        title: '进出记录查看',
        width: '45%',
        data: {...rowData},
        componentTag: 'TableDetail'
      }
    },
    reset () {
      this.filters = this.filters.map(i => ({...i,value: ''}))
      this.getList()
    }
  }
}
</script>

